import React from 'react';
import {Marker} from 'react-bmap';
import BMap from 'BMap';
import red_marker from '../../assets/red_marker.png';
import styles from './CustomClusterMarker.less';
import cluster_marker from '../../assets/cluster_marker.png';

const CustomClusterMarker = ({
                                 position = {
                                     lng: 116.402544,
                                     lat: 39.928216
                                 },
                                 width = 52,
                                 height = 52,
                                 background = `url(${cluster_marker})`,
                                 textAlign = 'center',
                                 lineHeight = '1em',
                                 color = 'black',
                                 index = '',
                                 events = {
                                     click() {
                                     },
                                     mouseover() {

                                     }
                                 },
                                 clusterInfo,
                                 ...otherProps
                             }) => {
    const style = {
        width: width + 'px',
        height: height + 'px',
        textAlign,
        color,
        background,
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
    };

    const offset = new BMap.Size(-width / 2, -height);
    return (
        <React.Fragment>
            <Marker position={position} offset={offset}  {...otherProps} >
                <div style={style}
                     className={styles.markerWrap}
                     onClick={events.click}
                     onMouseOver={events.events}
                >
                    <div className={styles.text}>{index}</div>
                    <div className={styles.toolTipText}>
                        {clusterInfo}
                    </div>
                </div>
            </Marker>
        </React.Fragment>
    )

};


export default CustomClusterMarker;
